<html ng-app="myApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>天翼区块链路由器</title>
    <link href="<%=resource%>/imgs/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="<%=resource%>/index.css">
    <script src="<%=resource%>/js/moment.js"></script>
    <script type="text/javascript" src="<%=resource%>/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/menu.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/echarts.min.js"></script>
    <script src="<%=resource%>/angular/angular.js"></script>
    <script src="<%=resource%>/angular/angular-sanitize.min.js"></script>
    <script src="<%=resource%>/angular/angular-animate.min.js"></script>
    <script src="<%=resource%>/js/app/ngapp.js"></script>
</head>

<body style="position: relative;">
<div id="head">
    <span style="margin-left:60px;"></span><img src="<%=resource%>/imgs/logo.png">
    <span style="margin-left:20px;">天翼区块链路由器</span>
    <a href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</a>
    <a href="http://www.skywindlink.com/" target="blank">访问官网</a>
    <a class="qrcode">APP下载
        <div class="d">
            <img src="<%=resource%>/imgs/qrcode.jpg">
        </div>
    </a>
</div>
<div id="head-phone">
    <div class="h-left">
        <span><img src="<%=resource%>/imgs/logo.png"></span>
        <span class="h-t">天翼区块链路由器</span>
    </div>
    <div class="h-right">
        <a href="http://www.skywindlink.com/" target="blank">访问官网</a><span class="h-line"> | </span><span class="h-app">APP下载</span>
        <img class="h-nav" src="<%=resource%>/imgs/h-nav.png" alt="">
        <div class="d">
            <img src="<%=resource%>/imgs/qrcode.jpg">
        </div>
    </div>
</div>
<div id="phone-nav">
    <div class="nav-close"><img src="<%=resource%>/imgs/nav-close.png"></div>
    <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "index")%>' style="margin-top: 40px">
        <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
        <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
        <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
        <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
        <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
        <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
    </div>
    <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
        <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
    </div>
    <div class="logout"><span href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</span></div>
</div>
<div class="container clearfix">
    <div id="menu">
        <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "index")%>'>
            <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
            <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
        </div>
        <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
            <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
        </div>
        <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
            <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
        </div>
        <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
            <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
            <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
            <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
        </div>
    </div>
    <div class="content" ng-controller="statusController">
        <div class="home">
            <div class="c">
                <div class="sl clearfix">
                    <div class="i">
                        <img src="<%=resource%>/imgs/status-device.png" />
                        <div class="t t-pc">
                            <span>终端设备:{{sysstatus.linkcount}}台</span>
                        </div>
                        <div class="t t-phone">
                            <div><span>终端设备:</span></div>
                            <div><span>{{sysstatus.linkcount}}台</span></div>
                        </div>
                    </div>
                    <div class="i1">
                        <img src="<%=resource%>/imgs/status-true.png" class="img-pc"/>
                        <img src="<%=resource%>/imgs/sP-true.png" class="img-phone"/>
                    </div>
                    <div class="i">
                        <img src="<%=resource%>/imgs/status-router.png" />
                        <div class="t"><span>天翼区块链路由器</span></div>
                    </div>
                    <div class="i1">
                        <img class="si img-pc" ng-if="!imgStatu" src="<%=resource%>/imgs/status-false.png" />
                        <img class="si img-pc" ng-if="imgStatu" src="<%=resource%>/imgs/status-true.png" />
                        <img class="si img-phone" ng-if="!imgStatu" src="<%=resource%>/imgs/sP-false.png" />
                        <img class="si img-phone" ng-if="imgStatu" src="<%=resource%>/imgs/sP-true.png" />
                    </div>
                    <div class="i">
                        <img src="<%=resource%>/imgs/status-world.png" />
                        <div class="t"><span>互联网</span></div>
                    </div>
                </div>
            </div>
            <div class="c clearfix">
                <div class="cai">
                    <div class="ca">
                        <div class="t">
                            路由器型号
                        </div>
                        <div class="t1">
                            {{sysinfo.model}}
                        </div>
                    </div>
                </div>
                <div class="cai">
                    <div class="ca">
                        <div class="t">
                            Mac地址
                        </div>
                        <div class="t1">
                            <span class="x">{{sysinfo.mac}}</span>
                        </div>
                    </div>
                </div>
                <div class="cai">
                    <div class="ca">
                        <div class="t">
                            设备ID
                        </div>
                        <div class="t1">
                            {{sysinfo.sn}}
                        </div>
                    </div>
                </div>
                <div class="cai">
                    <div class="ca">
                        <div class="t">
                            联网时长
                        </div>
                        <div class="t1">
                            {{sysstatus.wanuptime}}
                        </div>
                    </div>
                </div>
                <div class="cai">
                    <div class="ca">
                        <div class="t">
                            应用软件版本
                        </div>
                        <div class="t1">
                            {{sysinfo.fwver}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="c c-p">
                <div class="f1">
                    <div class="b">
                        <div class="t">
                            <span>实时流量监测</span>
                        </div>
                        <div class="t1">
                            <div class="t1-i">
                                <span>实时上行速度：</span>
                                <span style="color:#1A59E2;font-weight: bold">{{sysstatus.wanspeed.upspeed}}</span>
                                <span>Kb/s</span>
                            </div>
                            <div class="t1-i">
                                <span>实时下行速度：</span>
                                <span style="color:#eb8224;font-weight: bold">{{sysstatus.wanspeed.dwspeed}}</span>
                                <span>Kb/s</span>
                            </div>
                        </div>
                        <div id="time" style="height: 360px;"></div>
                    </div>
                </div>
                <div id="footer" style="display: block">
                    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        app.controller('statusController', function($scope, $http) {
            $scope.datas = {
                xdatas: [],
                ydatas: [],
                ydatas1: []
            };

            $scope.sysinfo = {
                model: '',
                mac: '',
                sn: '',
                fwver: '',
            };
            $scope.sysstatus = {
                linkcount: '',
                wanstatus: '',
                wanuptime: 0,
                wanspeed: {
                    time: '',
                    dwspeed: '',
                    upspeed: '',
                    dwflow: '',
                    upflow: '',
                }
            };
            $scope.wanStatu = {};
            $scope.imgStatu = true;

            $scope.getsysinfo = function() {
                var url = '<%=luci.dispatcher.build_url("web", "system", "sysinfo")%>';
                $http.post(url).success(function(data) {
                    $scope.sysinfo = data.data;
                });
            };

            $scope.getWan = function() {
                var url = '<%=luci.dispatcher.build_url("web", "system", "wanstatus")%>';
                $http.post(url).success(function(data) {
                    $scope.wanStatu = data.data;
                    if ($scope.wanStatu.wanstatus == '1') {
                        $scope.imgStatu = true;
                    } else {
                        $scope.imgStatu = false;
                    }
                });
            };

            $scope.getStatus = function() {
                var url = '<%=luci.dispatcher.build_url("web", "system", "sysstatus")%>';
                $http.post(url).success(function(data) {
                    $scope.sysstatus = data.data;
                    $scope.sysstatus.wanspeed.upspeed = $scope.sysstatus.wanspeed.upspeed / 1000;
                    $scope.sysstatus.wanspeed.dwspeed = $scope.sysstatus.wanspeed.dwspeed / 1000;
                    $scope.sysstatus.wanuptime = utils.formatSeconds($scope.sysstatus.wanuptime);
                    var xtime = utils.getDateDiff($scope.sysstatus.wanspeed.time);
                    if ($scope.datas.ydatas.length > 10000) {
                        $scope.datas.xdatas.splice(0, 1);
                        $scope.datas.ydatas1.splice(0, 1);
                        $scope.datas.ydatas.splice(0, 1);
                    } else {
                        $scope.datas.xdatas.push(xtime);
                        $scope.datas.ydatas1.push($scope.sysstatus.wanspeed.upspeed);
                        $scope.datas.ydatas.push($scope.sysstatus.wanspeed.dwspeed);
                        $scope.setOne();
                    }

                });
            }
            $scope.init = function() {
                $scope.getsysinfo();
                $scope.getStatus();
                $scope.setTime();
                $scope.getWan();
            }

            $scope.setTime = function() {
                setInterval(function() {
                    $scope.getStatus();
                }, 1000);
                setInterval(function () {
                    $scope.getWan();
                },5000);
            };

            $scope.setOne = function() {
                var myChart = echarts.init(document.getElementById('time'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        trigger: 'axis'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: $scope.datas.xdatas
                    },
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}(Kb/s)'
                        }
                    }],
                    grid: {
                        x: 80
                    },
                    series: [{
                        name: '上行速度',
                        type: 'line',
                        smooth: true,
                        symbolSize: 3,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    color: '#c5d8fe'
                                },
                                lineStyle: {
                                    color: '#1A59E2' //线的颜色
                                }
                            }
                        },
                        data: $scope.datas.ydatas1
                    }, {
                        name: '下行速度',
                        type: 'line',
                        smooth: true,
                        symbolSize: 3,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    color: '#c5d8fe'
                                },
                                lineStyle: {
                                    color: '#eb8224' //线的颜色
                                }
                            }
                        },
                        data: $scope.datas.ydatas
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            $scope.init();
        });
    </script>
</div >
</body>

</html>